<template>
    <div id="aboutUsPage">
        <mu-row gutter>
            <mu-sub-header>我们的能力</mu-sub-header>
            <mu-col span="12" sm="6" lg="3" style="margin:10px 0" v-for="item in cardData" :key="item.img">
                <div class="grid-cell">
                    <mu-card style="width: 100%;">
                        <mu-card-media style="height:200px">
                            <img :src="item.img" style="width:100%;height:100%" />
                        </mu-card-media>
                        <mu-card-title :title="item.title" ></mu-card-title>
                        <mu-card-text>
                            {{ item.subTitle }}
                        </mu-card-text>
                    </mu-card>
                </div>
            </mu-col>
            <mu-sub-header>我们的团队</mu-sub-header>
            <mu-col span="12" sm="6" lg="3" style="margin:10px 0" v-for="item in occData" :key="item.img">
                <div class="grid-cell">
                    <mu-card style="width: 100%;">
                        <mu-card-media style="height:200px">
                            <img :src="item.img" style="width:100%;height:100%" />
                        </mu-card-media>
                        <mu-card-title :title="item.occName" ></mu-card-title>
                    </mu-card>
                </div>
            </mu-col>
        </mu-row>
    </div>
</template>

<script>
export default {
    name: "AboutUs",
    data() {
        return {
            cardData: [
                {
                    title: "需求挖掘",
                    subTitle:
                        "只有更好的了解需求,挖掘潜在需求,才能更好的权衡和决策!",
                    img: require("@/assets/img/aboutUs1.png"),
                },
                {
                    title: "需求评审",
                    subTitle:
                        "评审是对未知风险的有效控制措施,是成本控制的关键。",
                    img: require("@/assets/img/aboutUs2.png"),
                },
                {
                    title: "产品产出",
                    subTitle:
                        "一个完备的产品产出离不开一个专业且富有经验的团队。",
                    img: require("@/assets/img/aboutUs6.png"),
                },
                {
                    title: "升级维护",
                    subTitle: "一个令人信服的作品将会一直不断的完善与升级。",
                    img: require("@/assets/img/aboutUs5.png"),
                },
            ],
            occData: [
                {
                    img: require("@/assets/img/occ0.svg"),
                    occName: "产品类 / Product",
                },
                {
                    img: require("@/assets/img/occ1.svg"),
                    occName: "市场类 / Market",
                },
                {
                    img: require("@/assets/img/occ2.svg"),
                    occName: "开发类 / Develop",
                },
                {
                    img: require("@/assets/img/occ3.svg"),
                    occName: "运营类 / Operate",
                },
            ],
        };
    },
    mounted() {
    },
};
</script>

<style scoped lang="less">
#aboutUsPage {
    .mu-sub-header {
        font-weight: bold;
        font-size: 24px;
    }
    .mu-grid-tile {
        .title {
            font-size: 18px;
        }
        .subTitle {
            font-size: 14px;
        }
    }
}
</style>